<template>
    <div class="user-info-container">
        <div class="user-info-box">
            <h1>编辑用户信息</h1>
            <el-form
                    ref="ruleFormRef"
                    :model="userForm"
                    label-width="80px"
                    status-icon
                    :rules="rules"
                    class="form"
            >
                <el-form-item prop="name" label="用户名">
                    <el-input
                            placeholder="请输入用户名"
                            v-model="userForm.name"/>
                </el-form-item>
                <el-form-item prop="url" label="头像url">
                    <el-input
                            placeholder="请输入头像url"
                            v-model="userForm.url"/>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" class="custom-class" :loading="commonData.btnLoading" @click="handleEdit">
                        编辑
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import {reactive, ref, onMounted, getCurrentInstance} from 'vue';
    import {api} from '@/utils/config';
    import service from '@/utils/service';
    import {ElMessage} from 'element-plus';

    const {proxy} = getCurrentInstance();
    //表单数据
    const userForm = reactive({
        name: '',
        url: ''
    });
    const ruleFormRef = ref();
    const rules = reactive({
        name: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        url: [
            {required: true, message: '请输入头像url', trigger: 'blur'}
        ],
    });
    const commonData = reactive({
        btnLoading: false
    });
    onMounted(() => {
        getUserInfo();
    });
    //提交编辑
    const handleEdit = () => {
        ruleFormRef.value.validate((valid) => {
            if (valid) {
                commonData.btnLoading = true;
                service.doPost(api['info'], userForm)
                    .then(async (response) => {
                        if (response.code === 1) {
                            ElMessage({
                                showClose: false,
                                message: '编辑成功',
                                type: 'success',
                            });
                            proxy.$socket.io.emit('getOwnUserInfo');
                        }
                        commonData.btnLoading = false;
                    }).catch(() => {
                    commonData.btnLoading = false;
                })
            }
        })
    };
    //获取用户信息
    const getUserInfo = () => {
        commonData.btnLoading = true;
        service.doGet(api['info'], {})
            .then(async (response) => {
                if (response.code === 1) {
                    const data = response.data.userDetail;
                    userForm.name = data.name;
                    userForm.url = data.url;
                }
                commonData.btnLoading = false;
            }).catch(() => {
            commonData.btnLoading = false;
        })
    };
</script>

<style scoped lang="less">
    .user-info-container {
        background: #fff;
        height: 100%;

        .user-info-box {
            width: 500px;
            margin: 0 auto;
            padding: 50px 0;

            h1 {
                margin: 0;
                text-align: center;
                font-size: 24px;
            }

            .form {
                margin-top: 20px;
            }
        }
    }
</style>